<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
    
    <head>
        <title>添加角色</title>
        <header th:replace="sys/head::html"></header>
    </head>
    <body>
        <form class="layui-form">
          <div class="layui-form-item">
              <label for="name" class="layui-form-label">
                  <span class="x-red">*</span>角色名
              </label>
              <div class="layui-input-inline">
                  <input type="text" th:value="${sysRole.name}" id="name" name="name" required="name" lay-verify="required"
                  autocomplete="off" class="layui-input">
              </div>
          </div>
          <div class="layui-form-item">
              <label for="description" class="layui-form-label">
                  <span class="x-red">*</span>描述
              </label>
              <div class="layui-input-inline">
                  <input type="text" th:value="${sysRole.description}" id="description" name="description" required=""
                  autocomplete="off" class="layui-input">
              </div>
          </div>

          <div class="layui-form-item">
              <label class="layui-form-label">权限</label>
              <div id="tree" style="margin-left: 150px">
              </div>
          </div>
          <div class="layui-form-item">
              <label class="layui-form-label">
              </label>
              <button  class="layui-btn" lay-filter="add" lay-submit="">
                  提交
              </button>
          </div>
      </form>

    <script>layui.use(['form', 'layer', "tree"],
        function() {
            $ = layui.jquery;
            var form = layui.form,
            layer = layui.layer,
            tree = layui.tree;

            //自定义验证规则
            form.verify({
                name: function(value) {
                    if (value.length < 5) {
                        return '昵称至少得5个字符啊';
                    }
                }
            });

            //监听提交
            form.on('submit(add)',
            function(data) {

               $.ajax({
                   url: appPath + '/sys/role/add',
                   type: 'post',
                   data: data.field,
                   dataType: 'json',
                   success: function (result) {
                        if(result.code == 200){
                            layer.alert("增加成功", {
                                    icon: 6
                                },
                                function() {
                                    //关闭当前frame
                                    xadmin.close();
                                    // 可以对父窗口进行刷新
                                    xadmin.father_reload();
                                });
                        }else{
                            layer.alert(result.msg);
                        }
                   }
               })

                return false;
            });
            layui.tree.render({
                elem: '#tree'
                ,data: [{
                    title: '一级1'
                    ,id: 1
                    ,field: 'name1'
                    ,checked: true
                    ,spread: true
                    ,children: [{
                        title: '二级1-1 可允许跳转'
                        ,id: 3
                        ,field: 'name11'
                        ,href: 'https://www.layui.com/'
                        ,children: [{
                            title: '三级1-1-3'
                            ,id: 23
                            ,field: ''
                            ,children: [{
                                title: '四级1-1-3-1'
                                ,id: 24
                                ,field: ''
                                ,children: [{
                                    title: '五级1-1-3-1-1'
                                    ,id: 30
                                    ,field: ''
                                },{
                                    title: '五级1-1-3-1-2'
                                    ,id: 31
                                    ,field: ''
                                }]
                            }]
                        },{
                            title: '三级1-1-1'
                            ,id: 7
                            ,field: ''
                            ,children: [{
                                title: '四级1-1-1-1 可允许跳转'
                                ,id: 15
                                ,field: ''
                                ,href: 'https://www.layui.com/doc/'
                            }]
                        },{
                            title: '三级1-1-2'
                            ,id: 8
                            ,field: ''
                            ,children: [{
                                title: '四级1-1-2-1'
                                ,id: 32
                                ,field: ''
                            }]
                        }]
                    },{
                        title: '二级1-2'
                        ,id: 4
                        ,spread: true
                        ,children: [{
                            title: '三级1-2-1'
                            ,id: 9
                            ,field: ''
                            ,disabled: true
                        },{
                            title: '三级1-2-2'
                            ,id: 10
                            ,field: ''
                        }]
                    },{
                        title: '二级1-3'
                        ,id: 20
                        ,field: ''
                        ,children: [{
                            title: '三级1-3-1'
                            ,id: 21
                            ,field: ''
                        },{
                            title: '三级1-3-2'
                            ,id: 22
                            ,field: ''
                        }]
                    }]
                },{
                    title: '一级2'
                    ,id: 2
                    ,field: ''
                    ,spread: true
                    ,children: [{
                        title: '二级2-1'
                        ,id: 5
                        ,field: ''
                        ,spread: true
                        ,children: [{
                            title: '三级2-1-1'
                            ,id: 11
                            ,field: ''
                        },{
                            title: '三级2-1-2'
                            ,id: 12
                            ,field: ''
                        }]
                    },{
                        title: '二级2-2'
                        ,id: 6
                        ,field: ''
                        ,children: [{
                            title: '三级2-2-1'
                            ,id: 13
                            ,field: ''
                        },{
                            title: '三级2-2-2'
                            ,id: 14
                            ,field: ''
                            ,disabled: true
                        }]
                    }]
                },{
                    title: '一级3'
                    ,id: 16
                    ,field: ''
                    ,children: [{
                        title: '二级3-1'
                        ,id: 17
                        ,field: ''
                        ,fixed: true
                        ,children: [{
                            title: '三级3-1-1'
                            ,id: 18
                            ,field: ''
                        },{
                            title: '三级3-1-2'
                            ,id: 19
                            ,field: ''
                        }]
                    },{
                        title: '二级3-2'
                        ,id: 27
                        ,field: ''
                        ,children: [{
                            title: '三级3-2-1'
                            ,id: 28
                            ,field: ''
                        },{
                            title: '三级3-2-2'
                            ,id: 29
                            ,field: ''
                        }]
                    }]
                }]
                ,showCheckbox: true  //是否显示复选框
                ,id: 'demoId1'
                ,isJump: true //是否允许点击节点时弹出新窗口跳转
                ,click: function(obj){
                    var data = obj.data;  //获取当前点击的节点数据
                    layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
                }
            });
        });
        function getAllRole(callback) {
            $.ajax({
                url: appPath + '/sys/role/all',
                type: 'get',
                dataType: 'json',
                success: function (result) {
                    var html = '';
                    if(result.datas && result.datas.length > 0) {
                        for(i in result.datas) {
                            var data = result.datas[i];
                            html += '<input type="radio" name="roleId" value="'+data.id+'" title="'+data.name+'" >' +
                                    '<div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-main layui-icon"></i><div>'+data.name+'</div></div>'
                        }
                        $('.show-role-container').html(html);
                        callback();
                    }
                }
            });
        }
    </script>

    </body>

</html>
